<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="author" content="Drew Douglass">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>Fun With CSS3 and Circles :: Demo</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css" media="screen">
#wrap {
	width:100;
	margin:0px auto;
}
.circle{
	border: 1px solid #696;
text-align: center; 
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);}

.circle1 {
	display: block;
	display: block;
	width: 80px;
	height: 80px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	position:relative;
	top: 25px
	
}
.circle2 {
	display: block;
	display: block;
	width: 60px;
	height: 60px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	position:relative;
	left: 100px
}
.circle3 {
	display: block;
	display: block;
	width: 120px;
	height: 120px;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	position:relative;
	left: -100px
}
.circle4 {
	display: block;
	display: block;
	width: 40px;
	height: 40px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	position:relative;
	left: 50px;
}
.circle5 {
	display: block;
	display: block;
	width: 80px;
	height: 80px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	position:relative;
	right: -100px;
	top : -150px;

}
#inner {
    width: 50%;
    margin: auto;
}

</style>
<meta name="chromesniffer" id="chromesniffer_meta" content="jQuery=1.3&amp;"><script type="text/javascript" src="chrome-extension://homgcnaoacgigpkkljjjekpignblkeae/detector.js"></script></head>

<body>
	<div id="wrap">
		<span class="circle1 circle"><div id="inner">Chotu</div></span>
		<span class="circle2 circle">HR</span>
		<span class="circle3 circle">Techn</span>
		<span class="circle4 circle">Sales</span>
		<span class="circle5 circle">Fin</span>
		
		
	</div>		

</body></html>